<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的信息</title>
</head>
<body>
<%--user setting page--%>
<div id="user_setting_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse" data-transition="slide">主页</a>

        <h1>我的信息</h1>
        <a href="javascript:submitForm();" data-icon="check">更新</a>
    </div>
    <div data-role="content">
        <div class="center red" style="display: none;" id="update_info">更新成功!</div>
        <form:form commandName="userForm" id="user_form" action="setting" data-ajax="false">
            <div data-role="collapsible" data-collapsed="false" data-theme="a" data-content-theme="c">
                <h3>基本信息</h3>
                <ul data-role="listview" data-inset="true">
                    <li>
                        <div data-role="fieldcontain">
                            <label for="nick_name">呢称:</label>
                            <form:input path="nickName" placeholder="呢称" id="nick_name"/>
                            <form:errors path="nickName" cssClass="form_error"/>
                        </div>
                        <div data-role="fieldcontain">
                            <label for="cell_phone">手机:</label>
                            <form:input path="cellPhone" placeholder="手机" id="cell_phone"/>
                            <form:errors path="cellPhone" cssClass="form_error"/>
                            <form:hidden path="oldCellPhone"/>
                        </div>
                        <div data-role="fieldcontain">
                            <label for="city">城市:</label>
                            <form:input path="city" placeholder="城市" id="city"/>
                            <form:errors path="city" cssClass="form_error"/>
                        </div>
                    </li>
                    <li data-role="fieldcontain">
                        <label for="user_email">邮箱:</label>
                        <form:input path="email" readonly="true" id="user_email" cssClass="gray"/>
                        <form:errors path="email" cssClass="form_error"/>
                    </li>
                    <li data-role="fieldcontain">
                        <label for="last_login">上次修改时间:</label>
                        <form:input path="lastLoginTime" id="last_login" disabled="true"/>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="c">
                <h3>修改密码</h3>
                <ul data-role="listview" data-inset="true">
                    <li data-role="fieldcontain">
                        <label for="old_password">旧密码:</label>
                        <form:password path="oldPassword" id="old_password" placeholder="输入旧密码"/>
                        <form:errors path="oldPassword" cssClass="form_error"/>
                    </li>
                    <li data-role="fieldcontain">
                        <label for="new_password">新密码:</label>
                        <form:password path="newPassword" id="new_password" placeholder="新密码(至少8位)"/>
                        <form:errors path="newPassword" cssClass="form_error"/>
                    </li>
                    <li data-role="fieldcontain">
                        <label for="confirm_password">确认新密码:</label>
                        <form:password path="confirmPassword" id="confirm_password" placeholder="再次输入新密码"/>
                        <form:errors path="confirmPassword" cssClass="form_error"/>
                    </li>
                </ul>
            </div>
            <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="c">
                <h3>其他</h3>

                <div data-role="fieldcontain" class="center">
                    <div class="color-s" style="display: none;" id="update_user_ck_info">清除成功!</div>
                    <a href="javascript:cleanUserCookie();" data-role="button" data-mini="true" data-theme="e"
                       data-icon="delete">清除保存的用户名与密码信息</a>
                    <span class="gray">默认为保存两周后自动清除</span>
                </div>
            </div>
        </form:form>
    </div>
    <%--<div data-role="footer" data-position="fixed" data-theme="c">--%>
    <%--</div>--%>
    <script type="text/javascript" src="${contextPath}/js/jquery/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#old_password").val('${userForm.oldPassword}');
            $("#new_password").val('${userForm.newPassword}');
            $("#confirm_password").val('${userForm.confirmPassword}');

            <c:if test="${param.result}">
            $("#update_info").fadeIn(800).delay(800).fadeOut(800);
            </c:if>
        });

        function submitForm() {
            $("#user_form").submit();
        }

        function cleanUserCookie() {
            $.removeCookie('${userCookieKey}', { path:'/' });
            $("#update_user_ck_info").fadeIn(800).delay(800).fadeOut(800);
        }
    </script>
</div>
</body>
</html>